<template>
  <div class="flex-column flex-justify-start flex-align-center">
    <router-link
      style="width: 90%; margin: auto"
      v-for="item in options"
      :key="item.key"
      :to="item.path"
      :class="{
        'menu-item': true
      }"
    >
      <a-button class="mt10" style="width: 100%" type="primary" @click="selectLivestream(item.routeName)">{{
        item.label
      }}</a-button>
    </router-link>
  </div>
  <div class="live" v-if="showLive" v-drag-window>
    <div style="height: 40px; width: 100%" class="drag-title"></div>
    <a
      style="position: absolute; right: 10px; top: 10px; font-size: 16px; color: white"
      @click="() => root.$router.push('/' + ERouterName.LIVESTREAM)"
    >
      <CloseOutlined />
    </a>
    <router-view :name="routeName" />
  </div>
</template>

<script lang="ts" setup>
import { message } from 'ant-design-vue'
import { onMounted, ref, watch } from 'vue'
import { CloseOutlined } from '@ant-design/icons-vue'
import { getRoot } from '@/root'
import { ERouterName } from '@/types'
const root = getRoot()
const routeName = ref<string>('LiveOthers')
const showLive = ref<boolean>(root.$route.name === ERouterName.LIVING)

const options = [
  { key: 0, label: '声网直播', path: '/' + ERouterName.LIVESTREAM + '/' + ERouterName.LIVING, routeName: 'LiveAgora' },
  { key: 1, label: 'RTMP/GB28181 直播', path: '/' + ERouterName.LIVESTREAM + '/' + ERouterName.LIVING, routeName: 'LiveOthers' }
]

const selectLivestream = (route: string) => {
  showLive.value = root.$route.name === ERouterName.LIVING
  routeName.value = route
}

onMounted(() => {
  watch(
    () => root.$route.name,
    (data) => {
      showLive.value = data === ERouterName.LIVING
    },
    {
      deep: true
    }
  )
})
</script>

<style lang="scss">
.full-modal {
  .ant-modal {
    max-width: 100%;
    top: 0;
    padding-bottom: 0;
    margin: 0;
  }

  .ant-modal-content {
    display: flex;
    flex-direction: column;
    height: calc(100vh);
  }

  .ant-modal-body {
    flex: 1;
  }
}

.live {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 10px;
  margin-left: 345px;

  text-align: center;
  width: 800px;
  height: 720px;
  background: #232323;
}
</style>
